import { ref } from 'vue'
import { useRoute } from 'vue-router'
import {
  getSingerBrief,
  getSingerAlbum,
  getSingerAlbumAll
} from '@/service/singer'
import SingerMv from '../cpns/singer-mv.vue'
import SingerDetail from '../cpns/singer-detail.vue'
import SingerResemble from '../cpns/singer-resemble.vue'

export function InitDoing() {
  const route = useRoute()
  const MvRef = ref<InstanceType<typeof SingerMv>>()
  const DetailRef = ref<InstanceType<typeof SingerDetail>>()
  const simiRef = ref<InstanceType<typeof SingerResemble>>()
  const id = ref(0)
  id.value = Number(route.params.id)

  // 获取歌手简介
  const hotSongs = ref()
  const briefs = ref()
  getBrief(id.value)
  function getBrief(id: number) {
    getSingerBrief(id).then((res: any) => {
      briefs.value = res.artist
      hotSongs.value = res.hotSongs
    })
  }
  // tab切换
  const activeName = ref('first')
  const handleClick = (tab: any) => {
    switch (tab.props.name) {
      case 'second':
        MvRef.value.flag = true
        limit = 20
        MvRef.value?.getMv(id.value, 0)
        break
      case 'three':
        DetailRef.value?.getDetail(id.value)
        break
      case 'four':
        simiRef.value?.getSimi(id.value)
        break
      default:
        getAlbum(id.value)
    }
  }
  // 无限滚动
  let limit = 20
  const InfinteLoad = () => {
    if (activeName.value === 'second') {
      if (MvRef.value?.flag) {
        limit += 20
        MvRef.value?.getMv(id.value, 0, limit)
      }
    }
  }
  // 获取专辑数据 ps:该数据中不完整，没有歌曲信息故需要再用一个接口请求
  const albumAll: any = ref([])
  getAlbum(id.value)
  function getAlbum(id: number) {
    getSingerAlbum(id).then((res: any) => {
      res.hotAlbums.map((item: any) => {
        getAlbumAll(item.id)
      })
    })
  }
  // 获取完整专辑歌曲
  function getAlbumAll(id: number) {
    getSingerAlbumAll(id).then((res) => {
      albumAll.value.push(res)
    })
  }
  // 获取Mv数据
  // 获取歌手详情数据
  function getDesc(id: number) {
    console.log(id)
  }
  // 获取相似歌手数据
  function getSimi(id: number) {
    console.log(id)
  }

  return {
    id,
    briefs,
    hotSongs,
    activeName,
    handleClick,
    albumAll,
    MvRef,
    DetailRef,
    InfinteLoad,
    simiRef
  }
}
